import React,{useState,useEffect}  from 'react'
import ReactDOM from 'react-dom'



export default function Lifetest() {
    let [list, setList] = useState(['111','222','333'])

    useEffect(() => {
        console.log('相当于componentDidupdate ')
    }, [list])

    

    useEffect(() => {  
        setTimeout(() => {
            list = ['444','555','666']
            setList(list);
        }, 2000);      
        console.log('相当于componentDidMount ')
        return () => {
            // 如果什么数据都不绑定那么就是卸载的操作
            console.log('默认卸载的操作')
        }
    }, [])


    
    const del = (params) => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    

    return (
        <div id='app'>
            <h1>2秒之后数据会异步加载进来 </h1>
            {
            list.map((item ,i) => { 
                    return <li key={i} > 我是{item}  </li>
             })
            }
            <button onClick={del}> 消失 </button> 
        </div>
    )
}
